/*
.########...#######...#######..########
.##.....##.##.....##.##.....##....##...
.##.....##.##.....##.##.....##....##...
.########..##.....##.##.....##....##...
.##...##...##.....##.##.....##....##...
.##....##..##.....##.##.....##....##...
.##.....##..#######...#######.....##...
*/

@font-face {
  font-family: OpenSans;
  src: url(../fonts/OpenSans-Semibold.ttf);
}

:root{
  --color-red: rgb(255, 63, 52);
  --color-green: rgb(11, 232, 129);
  --color-blue: rgb(15, 188, 249);
  --color-orange: rgb(255, 168, 1);

  --px-radius: 0;
  --px-font: 14px;

  --opacity-over: 0;

  --shadow-focus: inset 0 0 0 rgba(0, 0, 0, 0);

  --color-back: transparent;
  --color-element: transparent;
  --color-border: transparent;
  --color-second: transparent;
  --color-top: transparent;
}

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	box-sizing: border-box;
  -webkit-user-drag: none;

  font-family: OpenSans;
  font-size: var(--px-font);
}

/*
....###....##....##.####.##.....##....###....########.####..#######..##....##..######.
...##.##...###...##..##..###...###...##.##......##.....##..##.....##.###...##.##....##
..##...##..####..##..##..####.####..##...##.....##.....##..##.....##.####..##.##......
.##.....##.##.##.##..##..##.###.##.##.....##....##.....##..##.....##.##.##.##..######.
.#########.##..####..##..##.....##.#########....##.....##..##.....##.##..####.......##
.##.....##.##...###..##..##.....##.##.....##....##.....##..##.....##.##...###.##....##
.##.....##.##....##.####.##.....##.##.....##....##....####..#######..##....##..######.
*/

@keyframes anim-show {
  from {
    opacity: 0;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/*
.########...#######..########..##....##
.##.....##.##.....##.##.....##..##..##.
.##.....##.##.....##.##.....##...####..
.########..##.....##.##.....##....##...
.##.....##.##.....##.##.....##....##...
.##.....##.##.....##.##.....##....##...
.########...#######..########.....##...
*/

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--color-back);
  padding: 64px;
}

label {
  color: var(--color-top);
}

/* theme icon */
.theme-icon {
  opacity: 0;
}

/*
  # #    # #####  #    # ##### 
  # ##   # #    # #    #   #   
  # # #  # #    # #    #   #   
  # #  # # #####  #    #   #   
  # #   ## #      #    #   #   
  # #    # #       ####    #   
*/

input[type=text] {
  width: calc(100% - 4px);
}

/*
  ####   ####  #    # #####   ##   # #    # ###### #####
 #    # #    # ##   #   #    #  #  # ##   # #      #    #
 #      #    # # #  #   #   #    # # # #  # #####  #    #
 #      #    # #  # #   #   ###### # #  # # #      #####
 #    # #    # #   ##   #   #    # # #   ## #      #   #
  ####   ####  #    #   #   #    # # #    # ###### #    #
*/

.container span {
  user-select: all;
  word-break: break-all;
  margin: 4px 8px;
  display: inline-block;
  color: var(--color-top);
}

/*
.########.##.....##.########....########.##....##.########.
....##....##.....##.##..........##.......###...##.##.....##
....##....##.....##.##..........##.......####..##.##.....##
....##....#########.######......######...##.##.##.##.....##
....##....##.....##.##..........##.......##..####.##.....##
....##....##.....##.##..........##.......##...###.##.....##
....##....##.....##.########....########.##....##.########.
*/
